// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, Animated } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';
import { StackedBarChart, LineChart, Grid, YAxis, XAxis } from 'react-native-svg-charts'
import * as scale from 'd3-scale'
import * as shape from 'd3-shape'
import dateFns from 'date-fns'
import Echarts from 'native-echarts';

import {
  VictoryChart,
  VictoryLine,
  VictoryLabel,
  VictoryZoomContainer,
  VictoryScatter,
  VictoryAxis,
  VictoryBar,
  LineSegment,
  VictoryArea,
  VictoryTooltip,
  VictoryClipContainer,
} from 'victory-native';
import { LinearGradient, Stop, Defs } from 'react-native-svg';
import moment from 'moment'

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { index } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, Layout, AutoImageHeight, RefreshScrollView } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { size, ScreenWidth } from '../../util/utils.js'
import grayscale from '../../util/grayscale.js'

class UserInfo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      chartsMap: {},
      charts: [],
      messagesMap: {},
      positionMap: {},
      ex: [],
      users: {},
      active: null,
      activeView: {},
      chratType: 'assets',
      refreshing: false,
      zoomDomain: { x: [0, 2] },
      offsetY: 0,
      option: {}
    }
  }

  componentDidMount() {
    const { userId } = this.props
    this.loading = Toast.loading('加载中', 0)

    this.loadingData()
  }

  loadingData() {
    const { userId } = this.props
    return index({ id: userId }).then(res => {
      this.setState({
        chartsMap: res.data.chartsMap,
        messagesMap: res.data.messagesMap,
        positionMap: res.data.positionMap,
        ex: res.data.ex,
        users: res.data.users,
      }, () => {
        this.setActiveView(0)
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  setActiveView(active) {
    const { chartsMap, messagesMap, positionMap, ex, users, } = this.state
    this.setState({
      active,
      activeView: {
        charts: Object.values(chartsMap)[active],
        messages: Object.values(messagesMap)[active],
        ex: ex[active],
        position: Object.values(positionMap)[active],
      }
    }, () => {
      this.changeChrat('assets')
    })
  }

  changeChrat(chratType) {
    const { activeView } = this.state
    this.setState({
      chratType,
      charts: activeView.charts.map((item, index) => {
        if (chratType == 'assets') {
          return {
            // x: index,
            x: moment(item.updated).format('MM-DD'),
            y: item.assets, // 收益率
          }
          // return {
          //   x: index,
          //   y: index, // 收益率
          // }
        }
        if (chratType == 'profit') {
          return {
            x: index,
            y: item.profit, // 收益率
          }
          // return {
          //   x: index,
          //   y: index + 100, // 收益率
          // }
        }
      })
    }, () => {
      var date = this.state.charts.map((item) => item.x);
      var data = this.state.charts.map((item) => item.y);
      let max = 0
      data.map((item) => {
        if (item > max) {
          max = item
        }
      })
      let min = 0
      data.map((item) => {
        if (item < min) {
          min = item
        }
      })

      let chratTooTip = ''
      let formatter = ''
      if (this.state.chratType == 'assets') {
        chratTooTip = '总收益'
        formatter = '${value}'
      }
      if (this.state.chratType == 'profit') {
        chratTooTip = '收益率'
        formatter = '{value}%'
      }
      this.setState({
        option: {
          grid: {
            left: '15%',
            right: '5%',
            bottom: '12%'
          },
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%'];
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
            axisLine: {
              lineStyle: {
                color: '#252C4F',
                width: 1,//这里是为了突出显示加上的
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#E4E4E4'
              }
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLine: {
              lineStyle: {
                color: '#252C4F',
                width: 1,//这里是为了突出显示加上的
              },
            },
            axisLabel: {
              formatter,
              show: true,
              textStyle: {
                color: '#E4E4E4'
              }
            },
            splitLine: {
              show: false
            },
            max: max + 500,
            min: min - 500
          },
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
          }, {
            show: false,
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            dataBackground: {
              lineStyle: {
                color: 'rgba(116, 132, 255,100)'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgb(116, 132, 255)"
                    },
                    {
                      offset: 0,
                      color: "rgb(27, 31, 60)"
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            borderColor: 'rgb(27, 31, 60)',
            textStyle: {
              color: "rgba(116, 132, 255,100)"
            },
            bottom: 0,
          }],
          series: [
            {
              name: chratTooTip,
              type: 'line',
              smooth: true,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: "rgba(116, 132, 255,100)"
                },
              },
              areaStyle: {
                normal: {
                  color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: "linear",
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgb(116, 132, 255)"
                      },
                      {
                        offset: 1,
                        color: "rgb(27, 31, 60)"
                      }
                    ]
                  }
                }
              },
              data: data
            }
          ]
        }
      })
    })

  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    this.loadingData().finally(() => {
      this.setState({
        refreshing: false,
        offsetY: 0
      })
    })
  }

  onTouchScroll = (e) => {
    console.log(e)
    console.log(e.nativeEvent)
    console.log(e.nativeEvent.locationY)
    this.setState({
      offsetY: e.nativeEvent.locationY
    })
  }

  onScroll = (e) => {
    this.setState({
      offsetY: e.nativeEvent.contentOffset.y
    })
  }

  handleZoom = (zoomDomain) => {
    console.log(zoomDomain)
    this.setState({ zoomDomain: zoomDomain });
  }
  
  getContractType(contractType) {
    if (contractType == 'quarter') {
        return '季度'
    }
    if (contractType == 'this_week') {
        return '当周'
    }
    if (contractType == 'next_week') {
        return '次周'
    }
}

  render() {
    const { userId, statusHeight } = this.props
    const { chartsMap, messagesMap, positionMap, ex, users, active, activeView, chratType, charts, refreshing, zoomDomain, offsetY, option } = this.state

    return (
      <Layout
        style={{ backgroundColor: '#0A0C21' }}
        statusStyle={{}}
      // footer={
      //   // <View style={{ paddingVertical: 12, paddingHorizontal: 38 }}>
      //   //   <TouchableOpacity style={{ backgroundColor: '#7484FF', height: 40, alignItems: 'center', justifyContent: 'center', borderRadius: 4 }}>
      //   //     <Text style={{ fontSize: 16, color: '#fff', lineHeight: 22, }}>取消订阅OKEx实盘</Text>
      //   //   </TouchableOpacity>
      //   // </View>
      // }
      >
        <Image
          blurRadius={.8}
          resizeMode='cover'
          source={{ uri: users && users.headImg || '' }}
          style={{
            width: ScreenWidth,
            height: 242 + statusHeight + Math.abs(offsetY),
            backgroundColor: '#181E3A',
            opacity: .2,
            position: 'absolute',
            top: 0
          }}
        />
        <NavBar
          type="transparent"
          title="个人中心"
          back={true}
          extra={<Image resizeMode='cover' style={{ width: 24, height: 24 }} source={require('../../static/images/icon-menu.png')} />}
          extraOnPress={() => {

          }}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onScroll={this.onScroll}
          scrollEventThrottle={60}
        // onTouchMove={this.onTouchScroll}
        // onTouchEnd={this.onTouchScroll}
        >
          {users && users.nickName && activeView && activeView.ex && (
            <View style={{}}>
              <View style={{}}>
                <View style={{ marginTop: 16, marginBottom: 16, paddingHorizontal: 40, }}>
                  <View style={{ flexDirection: 'row', alignItems: 'flex-start', padding: 12, borderRadius: 8 }}>
                    <View style={{ width: 60, height: 60, position: 'relative' }}>
                      {/* <Image resizeMode='cover' style={{ position: 'absolute', width: 18, height: 15, top: -5, left: 1 }} source={require('../../static/images/icon-hot.png')} /> */}
                      <View style={{}}>
                        <Image resizeMode='cover' source={{ uri: users.headImg || '' }} style={{ width: 60, height: 60, borderRadius: 30, backgroundColor: '#fff' }} />
                      </View>
                    </View>
                    <View style={{ marginLeft: 15, flex: 1 }}>
                      <View style={{ marginBottom: 16, flexDirection: 'row', justifyContent: 'space-between', }}>
                        <Text style={{ fontSize: 16, color: '#E4E4E4', lineHeight: 22, }}>{users.nickName || ''}</Text>
                        {/* <View style={{ marginLeft: 12, paddingHorizontal: 8, paddingVertical: 3, borderWidth: .5, borderRadius: 2, borderColor: '#8A90A8' }}>
                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, height: 14 }}>已关注</Text>
                    </View> */}
                      </View>
                      <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, }}>{users.signature}</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 15 }}>
                  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                    <Text style={{ fontSize: 16, color: '#fff', lineHeight: 22, marginBottom: 4 }}>{users.attention || 0}</Text>
                    <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, }}>关注</Text>
                  </View>
                  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                    <Text style={{ fontSize: 16, color: '#fff', lineHeight: 22, marginBottom: 4 }}>{users.fan || 0}</Text>
                    <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, }}>粉丝</Text>
                  </View>
                  {/* <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <Text style={{ fontSize: 16, color: '#fff', lineHeight: 22, marginBottom: 4 }}>{users.attention || 0}</Text>
                <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, }}>发言</Text>
              </View> */}
                </View>
              </View>
              <View style={{ backgroundColor: '#0A0C21' }}>
                <View style={{ paddingTop: 16, paddingBottom: 16, }}>
                  <View style={{ paddingLeft: 12, paddingRight: 4, flexDirection: 'row', }}>
                    {
                      Object.keys(positionMap).map((item, index) => {
                        return (
                          <TouchableOpacity onPress={() => this.setActiveView(index)} style={{ marginRight: 8 }} key={index}>
                            <View style={{
                              flexDirection: 'row',
                              alignItems: 'center',
                              backgroundColor: active == index ? '#7484FF' : '#232B54',
                              paddingHorizontal: 10,
                              paddingVertical: 8,
                              borderRadius: 2,
                            }}>
                              <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>{item}</Text>
                              {/* <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, marginLeft: 8 }}>No.1</Text> */}
                            </View>
                          </TouchableOpacity>
                        )
                      })
                    }
                    <TouchableOpacity onPress={() => Actions.exchange({ active: 3 })} style={{ marginRight: 8 }}>
                      <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: '#232B54', paddingHorizontal: 10, paddingVertical: 8, borderRadius: 2, }}>
                        <Icon name="md-add" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                        <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>接入更多</Text>
                      </View>
                    </TouchableOpacity>
                  </View>
                </View>
                <View style={{ paddingTop: 4, paddingBottom: 16, marginBottom: 10, backgroundColor: '#10142D' }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
                    <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, flex: 1 }}>账户概述</Text>
                  </View>
                  <View style={{ height: .5, backgroundColor: '#232B54', marginTop: 4, marginHorizontal: 12 }}></View>
                  <View style={{ paddingLeft: 12, paddingRight: 4, }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 16 }}>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginBottom: 4 }}>总资产</Text>
                        <Text style={{ fontSize: 18, color: '#00C898', lineHeight: 25, }}>${activeView.ex.totalAssets}</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginBottom: 4 }}>总收益率</Text>
                        <Text style={{ fontSize: 18, color: activeView.ex.totalRevenueRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 25, }}>{activeView.ex.totalRevenueRate}%</Text>
                      </View>
                    </View>
                    <View style={{ height: .5, backgroundColor: '#232B54', marginTop: 4, }}></View>
                    <View style={{ height: 65, flexDirection: 'row', alignItems: 'center', }}>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总收益</Text>
                        <Text style={{ fontSize: 14, color: '#FFFFFF', lineHeight: 20, }}>${activeView.ex.totalRevenue}</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>交易胜率</Text>
                        <Text style={{ fontSize: 14, color: activeView.ex.winRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 20, }}>{activeView.ex.winRate}%</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>交易时长</Text>
                        <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>{activeView.ex.duration}</Text>
                      </View>
                    </View>
                    <View style={{ height: 65, flexDirection: 'row', alignItems: 'center', }}>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>周收益</Text>
                        <Text style={{ fontSize: 14, color: '#FFFFFF', lineHeight: 20, }}>${activeView.ex.weeklyEarnings}</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>周收益胜率</Text>
                        <Text style={{ fontSize: 14, color: activeView.ex.winRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 20, }}>{activeView.ex.winRate}%</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>交易频次</Text>

                        <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>{activeView.ex.frequency}</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View style={{ marginBottom: 10, backgroundColor: '#10142D' }}>
                  <View style={{ paddingHorizontal: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 16, zIndex: 99 }}>
                    <View style={{ flexDirection: 'row', }}>
                      <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, marginRight: 20 }}>最高：<Text style={{ color: '#E4E4E4', }}>{activeView.ex.hightRate}%</Text></Text>
                      <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, }}>最低：<Text style={{ color: '#E4E4E4', }}>{activeView.ex.lowTate}%</Text></Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                      <TouchableOpacity style={{ marginRight: 20 }} onPress={() => this.changeChrat('assets')}>
                        <Text style={{ fontSize: 12, color: chratType == 'assets' ? '#7484FF' : '#8A90A8', lineHeight: 16, }}>总收益</Text>
                      </TouchableOpacity>
                      <TouchableOpacity onPress={() => this.changeChrat('profit')}>
                        <Text style={{ fontSize: 12, color: chratType == 'profit' ? '#7484FF' : '#8A90A8', lineHeight: 16, }}>收益率</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                  <View style={{ marginTop: -30 }}></View>
                  <Echarts option={option} height={300} />
                </View>
                <View style={{ paddingTop: 4, paddingBottom: 16, marginBottom: 10, backgroundColor: '#10142D' }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
                    <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', }}>
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>账户概述</Text>
                      <View style={{ marginLeft: 12, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#00C898', borderRadius: 2, }}>
                        <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>单{activeView.ex.buyMultiple}倍</Text>
                      </View>
                      <View style={{ marginLeft: 12, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', borderRadius: 2, }}>
                        <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>空{activeView.ex.sellMultiple}倍</Text>
                      </View>
                    </View>
                    <TouchableOpacity onPress={() => Actions.positionHistory({ userId, exchangeId: activeView.ex.exchange })}>
                      <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: -8 }}>
                        <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginRight: 5 }}>持仓历史</Text>
                        <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                      </View>
                    </TouchableOpacity>
                  </View>
                  <View style={{ paddingHorizontal: 0, }}>
                    <ScrollView
                      horizontal
                      style={{
                        paddingLeft: 2,
                      }}
                    >
                      {activeView.position.map((item, index) => {
                        return (

                          <View key={positionListIndex} style={{ width: 110, marginLeft: 10, backgroundColor: '#334185', borderRadius: 8, overflow: 'hidden' }} >
                            <TouchableOpacity onPress={() => Actions.positionDetails({ exchangeId: item.exchangeApiId, id: item.id, userId: item.userId })}>
                              <View style={{ borderRadius: 8 }}>
                                <View style={{ marginTop: .5, borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: '#181E3A' }}>
                                  <View style={{ backgroundColor: '#232B54', borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomRightRadius: 16, }}>
                                    <View style={{ paddingHorizontal: 6 }}>
                                      <Text style={{ fontSize: 11, color: positionListItem.direction == 'buy' ? '#00C898' : '#FF5757', lineHeight: 28, }}>{positionListItem.symbol} {this.getContractType(positionListItem.contractType)}·{positionListItem.direction == 'buy' && ('单')}{positionListItem.direction == 'sell' && ('空')}</Text>
                                    </View>
                                  </View>
                                </View>
                                <View style={{ backgroundColor: '#232B54', }}>
                                  <View style={{ paddingHorizontal: 6, borderTopLeftRadius: 16, backgroundColor: '#181E3A', }}>
                                    <View style={{ marginBottom: 4, marginTop: 4 }}>
                                      <Text style={{ fontSize: 18, color: positionListItem.profitRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 25, }}>{positionListItem.profitRate * 100 || 0}%</Text>
                                    </View>
                                    <View style={{}}>
                                      <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>均价</Text>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>${positionListItem.costHold || 0}</Text>
                                      </View>
                                      <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>持仓</Text>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{positionListItem.volume || 0}张</Text>
                                      </View>
                                      <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>价值</Text>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{positionListItem.lastPrice || 0}</Text>
                                      </View>
                                      <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>交易所</Text>
                                        <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{positionListItem.exchangeName || 0}</Text>
                                      </View>
                                    </View>
                                  </View>
                                </View>
                              </View>
                            </TouchableOpacity>
                          </View>


                          <TouchableOpacity key={index} onPress={() => { }} style={{ marginLeft: 10, }}>
                            <View style={{ width: 318, backgroundColor: '#334185', borderRadius: 8, overflow: 'hidden', flexDirection: 'row', paddingTop: .5, }} >
                              <View style={{ width: 130, backgroundColor: '#232B54', }}>
                                <View style={{ borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: '#181E3A', height: 107, alignItems: 'center', justifyContent: 'center', }}>
                                  <View style={{ borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomRightRadius: 16, }}>
                                    <View style={{ paddingHorizontal: 6 }}>
                                      <Text style={{ fontSize: 11, color: '#FF5757', lineHeight: 17, textAlign: 'center' }}>{item.symbol}</Text>
                                      <Text style={{ fontSize: 11, color: '#FF5757', lineHeight: 17, textAlign: 'center' }}>{item.contractType}·{item.direction}</Text>
                                    </View>
                                  </View>
                                  <View style={{ marginTop: 17 }}>
                                    <Text style={{ fontSize: 18, color: '#07C69A', lineHeight: 25, }}>{item.profitRate}%</Text>
                                  </View>
                                </View>
                              </View>
                              <View style={{ backgroundColor: '#181E3A', flex: 1, }}>
                                <View style={{ paddingHorizontal: 6, borderBottomLeftRadius: 16, backgroundColor: '#232B54', height: 107, alignItems: 'center', justifyContent: 'center', }}>
                                  <View style={{ width: 110, marginTop: 8, }}>
                                    <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>均价</Text>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>${item.costOpen}</Text>
                                    </View>
                                    <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>持仓</Text>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{item.volume}张</Text>
                                    </View>
                                    <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>收益</Text>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{item.profit} BTC</Text>
                                    </View>
                                    <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>交易所</Text>
                                      <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{item.symbol}</Text>
                                    </View>
                                  </View>
                                </View>
                              </View>
                            </View>
                          </TouchableOpacity>
                        )
                      })}
                      <View style={{ width: 12 }}></View>
                    </ScrollView>
                  </View>
                </View>
                <View style={{ paddingTop: 4, paddingBottom: 16, backgroundColor: '#10142D' }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
                    <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', }}>
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>最新操作</Text>
                    </View>
                  </View>
                  <View style={{ paddingHorizontal: 12, }}>
                    {
                      activeView.messages.map((item, index) => {
                        return (
                          <View style={{ flexDirection: 'row', }} key={index}>
                            <View style={{}}>
                              <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, marginBottom: 4 }}>{item.created.split(' ')[0]}</Text>
                              <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 14, }}>{item.created.split(' ')[1]}</Text>
                            </View>
                            <View style={{ alignItems: 'center', marginHorizontal: 6 }}>
                              <View style={{ width: 13, height: 13, borderRadius: 6.5, backgroundColor: 'rgba(116, 132, 255, 0.3)', alignItems: 'center', justifyContent: 'center', }}>
                                <View style={{ width: 7, height: 7, borderRadius: 3.5, backgroundColor: '#7484FF' }} />
                              </View>
                              <View style={{ flex: 1, width: .5, backgroundColor: '#252C4F' }}></View>
                            </View>
                            <View style={{ flex: 1, paddingBottom: 24 }}>
                              <View style={{ flexDirection: 'row', marginBottom: 12 }}>
                                <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', borderRadius: 2, }}><Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>{item.title}</Text></View>
                              </View>
                              <Text style={{ fontSize: 13, color: '#8A90A8', lineHeight: 20, }}>{item.content}</Text>
                            </View>
                          </View>
                        )
                      })
                    }
                  </View>
                </View>
              </View>
            </View>
          )}
        </RefreshScrollView>
      </Layout >
    );
  }
}

export default connect(({ userInfo, statusHeight }) => ({
  userInfo, statusHeight
}))(pureRender(UserInfo))
